<template>
    <div class="box">
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="店铺管理" :text3="username"/>
        <div class="store-management">
            <div class="title">
                <h4>店铺管理</h4>
                <button type="button" class="preservation-btn" @click="clicka">保存</button>
            </div>
            
            <div class="management-content">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动形式">
                        <el-input type="textarea" v-model="form.bulletin"></el-input>
                    </el-form-item>
                </el-form>
                <div class="head-portrait">
                    店铺头像
                    <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    action="http://127.0.0.1:5000/shop/upload"
                    :on-success="handleAvatarSuccess">
                    <img :src="headPortrait" class="avatar">
                    </el-upload>

                </div>
                <div class="store-img">
                   <p>店铺图片：</p>
                    <el-upload
                    class="upload"
                    :file-list="shopimg"
                    action="http://127.0.0.1:5000/shop/upload"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="shopImgInfo">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl">
                    </el-dialog>
                </div>
                <div class="distribution distribution-fee">
                    配送费
                    <input type="text" v-model="cost" class="ipt">
                </div>
                <div class="distribution distribution-time">
                    配送时间
                    <input type="text" v-model="time" class="ipt">
                </div>
                <div class="distribution distribution-desc">
                    配送描述
                    <input type="text" v-model="giveDesc" class="ipt">
                </div>
                <div class="distribution score">
                    店铺评分
                    <input type="text" v-model="score" class="ipt" disabled>
                </div>
                <div class="distribution sales-volume">
                    销量
                    <input type="text" v-model="salesVolume" class="ipt" disabled>
                </div>
               <div class="distribution score">
                    添加活动
                    <input type="text" v-model="addActivity" class="ipt">
                    <el-button type="primary" @click="clickAdd">添加</el-button>
                </div>

                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox v-for="(item,index) in activity" :key="index" :label="item" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="营业时间" >
                        <el-time-picker
                        is-range
                        v-model="activitytime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                        </el-time-picker>
                    </el-form-item>
                </el-form>
            </div>
            
        </div>
    </div>
</template>

<script>

    import Crumbs from "../../components/Crumbs"
    import {shopInfo,shopedit} from "@/apis/api"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"../../assets/imgs/touxiang.jpg",
             username:"",
            form: {
                name: '粥品香坊（天府新区）',
                region: '',
                delivery: false,
                type: [],
                resource: '',
                bulletin: '粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师'
            },
            activity:["在线支付满28减5","VC无限橙果汁全场8折","单人精彩套餐","特价饮品8折抢购","单人特色套餐"],
            addActivity:"",
            headPortrait:"",
            newheadPortrait:"",
            shopimg:[],
            newshopimg:[],
            cost:0,
            time:0,
            giveDesc:"蜂鸟专送",
            score:"4.5",
            salesVolume:"100",
            dialogVisible: false,
            dialogImageUrl:"",
            activitytime:"",
            id:"",
        }
    },
    created(){
      this.portrait=imgUrl;
      this.username=account;
      this.getshopInfo();
    },
    methods:{
        //获取店铺详情
        getshopInfo(){
            shopInfo().then(res=>{
                //   console.log(res.data)
                this.id=res.data.data.id;
                this.form.name=res.data.data.name;
                this.form.bulletin=res.data.data.bulletin;

                this.headPortrait=res.data.data.avatar;
                this.newheadPortrait=res.data.data.avatar.slice(res.data.data.avatar.lastIndexOf("/")+1);
                this.shopimg=res.data.data.pics.map(v=>{
                    return{
                        name:v.substring(v.lastIndexOf("/")+1),
                        url:v
                    }
                })
                this.newshopimg=JSON.parse(JSON.stringify(this.shopimg)).map(v=>v.name);
                this.cost=res.data.data.deliveryPrice;
                this.time=res.data.data.deliveryTime;
                this.giveDesc=res.data.data.description;
                this.score=res.data.data.score;
                this.salesVolume=res.data.data.sellCount;
                this.form.type=res.data.data.supports;
                this.activity=res.data.data.supports;
                this.activitytime=res.data.data.date
            })
        },
        //添加活动
        clickAdd(){
            this.activity.push(this.addActivity)
        },
        //店铺头像
      handleAvatarSuccess(res, file) {
        // console.log(res);
        this.headPortrait = URL.createObjectURL(file.raw);
        this.newheadPortrait=res.imgUrl
        // console.log(this.headPortrait)
      },
      //店铺图片
      handleRemove(file,) {
        // console.log(file);
        let delimgurl=file.response?file.response.imgUrl:file.name;
        for(let i=0; i<this.newshopimg.length; i++){
            if(this.newshopimg[i]===delimgurl){
                this.newshopimg.splice(i,1)
                // console.log(this.newshopimg)
                break;
            }
        }
      },
      shopImgInfo(res){
        // console.log(res)
        this.newshopimg.push(res.imgUrl)
        console.log(this.newshopimg)
      },
      //修改店铺信息
      clicka(){
          shopedit({
            id:this.id,
            name:this.form.name,
            bulletin:this.form.bulletin,
            avatar:this.newheadPortrait,
            deliveryPrice:this.cost,
            deliveryTime:this.time,
            description:this.giveDesc,
            score:this.score,
            sellCount:this.salesVolume,
            supports:JSON.stringify(this.form.type),
            date:JSON.stringify(this.activitytime),
            pics:JSON.stringify(this.newshopimg)
          }).then(res=>{
              console.log(res.data)
              this.getshopInfo();
              this.$message({
                message: res.data.msg,
                type: 'success'
                });
            })
      }
    }
}


// {
//     avatar: "http://127.0.0.1:5000/upload/shop/1590473180839.webp"
// bulletin: "尊敬的客官，六一攻略：\r\n①6月1日当天在评价区分享童年趣事赠6元无门槛红包\r\n②下单时在订单备注处填写【六一儿童节快乐】随机赠送“回忆杀爆款玩具”，数量有限，送完即止。\r\n提前预祝大小宝宝节日开心。"
// date: (2) ["1970-01-01 08:00:00", "1970-01-01 22:30:00"]
// deliveryPrice: 4
// deliveryTime: 38
// description: "蜂鸟专送"
// id: 1
// minPrice: 20
// name: "乡村基(高新金融店)"
// pics: (4) ["http://127.0.0.1:5000/upload/shop/1590480883773.webp", "http://127.0.0.1:5000/upload/shop/1590480886706.webp", "http://127.0.0.1:5000/upload/shop/1590480889717.webp", "http://127.0.0.1:5000/upload/shop/1590482092433.webp"]
// score: 4.5
// sellCount: 100
// supports: (2) ["单人精彩套餐", "VC无限橙果汁全场8折"]
// }
</script>

<style lang=less scoped>
    *{
        margin:0;
        padding:0
    }
    .box{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .store-management{
      flex:1;
      overflow:scroll;
      margin:20px;
      padding:10px;
      background-color:#fff;
      .title{
          display:flex;
          h4{
           margin-bottom:15px;
            padding-bottom:10px;
            border-bottom:1px solid #eee;
            flex:1;
      }
          .preservation-btn{
              margin-right:30px;
              display:block;
              width:50px;
              height:30px;
              color:#fff;
              background-color:cornflowerblue;
              outline: none;
              border-radius: 5px;
              border:0;
              cursor: pointer;
          }
      }
      .management-content{
          width:500px;
      }
      .head-portrait,.store-img{
          margin-top:15px;
          padding-left:12px;
          font-size:14px;
          color:#666;
            .avatar-uploader,.el-upload {
                margin-left:100px;
                width:180px;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .upload{
            margin-left:150px;
        }
          }
        .file{
            margin-left:68px;
            margin-top:15px;
            width:120px;
            height:120px;
            text-align: center;
            line-height:120px;
            font-size:70px;
            font-weight:50;
            border:1px solid #aaa;
            border-radius: 10px;
            cursor: pointer;
        }
        .file-ipt{
            display:none;
        }
        .distribution{
            margin-top:15px;
            padding-left:15px;
            font-size:14px;
            color:#666;
            .ipt{
                width:400px;
                margin-left:10px;
                width:320px;
                height:40px;
                outline: none;
                border:1px solid #aaa;
                border-radius: 5px;
                text-indent:15px;
                color:#666;
                font-size:16px;
            }
            .el-button{
                margin-left:20px;
                width:70px;
                height:40px;
            }
        }
        .distribution-time,.distribution-desc,.score{
            padding-left:3px;
        }
        .sales-volume{
            padding-left:30px;
        }
    }
</style>